<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM元素</title>
</head>
<body>
<img id="h1" src="img/背景图1.jpg"> <br><br>
<div class="cls">杰普软件</div> <br>
<div class="cls">Java程序员</div> <br>
<input type="checkbox" name="hobby"> 电影
<input type="checkbox" name="hobby"> 旅游
<input type="checkbox" name="hobby"> 游戏

<script>
    // 根据元素的id属性，获取单个element元素
    var oImg = document.getElementById("h1");
    console.log(oImg);
    console.log(typeof oImg);

    // 根据元素的class属性，获取element数组
    var oDivs = document.getElementsByClassName("cls");
    console.log(oDivs);
    console.log(typeof oDivs);
    // 根据元素的标签名字，获取element数组
    var oInputs = document.getElementsByTagName("input");
    console.log(oInputs);
    // 根据元素的name属性，获取element数组
    var oInputsHobby = document.getElementsByName("hobby");
    console.log(oInputsHobby);
    console.log(oInputs == oInputsHobby);
    console.log(oInputs === oInputsHobby);

    // HTMLCollection vs NodeList
    // 对比一下相同元素的不同访问形式，是否相同
    console.log(oInputs[0] == oInputsHobby[0]);
    console.log(oInputs[0] === oInputsHobby[0]);

    // 获取第二个div的element，修改其中的html
    oDivs[1].innerHTML = '<h1 style="color: red">996狂人</h1>';
</script>
</body>
</html>